<template>
  <div class="data">
    <el-row>
      <el-col :span="6">
        <div>
          <el-row>
            <el-col :span="6"><span style="line-height: 40px">问卷来源:</span></el-col>
            <el-col :span="12">
              <el-select v-model="serachData.type" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-row>
            <el-col :span="6"><span style="line-height: 40px">仅看推荐:</span></el-col>
            <el-col :span="12">
              <el-select v-model="serachData.isGood" placeholder="请选择">
                <el-option v-for="item in isGood" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-row>
            <el-col :span="5"><span style="line-height: 40px">关键词:</span></el-col>
            <el-col :span="12">
              <el-input v-model="serachData.keyword" placeholder="请输入关键词"></el-input>
            </el-col>
            <el-col :span="5">
              <el-button type="primary" style="margin-left: 10px" @click="getData()">查询</el-button>
            </el-col>

          </el-row>
        </div>
      </el-col>

      <el-col :span="6">
        <div>
          <el-row>
            <el-col :span="6" style="margin-left: 150px"><span style="line-height: 40px">自动更新:</span></el-col>
            <el-col :span="2">
              <el-switch active-text="开" inactive-text="关" style="height: 40px" v-model="tixing" active-color="#13ce66"
                @change="flush()" inactive-color="#ff4949">
              </el-switch>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-table border v-loading="loading" size="medium" :data="tableData" ref="table" :row-key="getRowKeys"
          :expand-row-keys="expands" @expand-change="exChange" style="width: 100%; margin-top: 10px">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-descriptions class="margin-top" :column="1" size="medium" border
                labelStyle="width: 120px;text-align: center">
                <el-descriptions-item>
                  <template slot="label">
                    问卷内容
                  </template>
                  <div style="display: flex;justify-content: space-around">
                    <div style="width: calc(100% - 140px);">
                      <p>{{props.row.title}}</p>
                    </div>
                    <span style="display: block;
    color: rgb(64, 158, 255);
    height: 100%;
    width: auto;
    margin: auto 0;
    /*float: right;*/
    /*margin-right: 29px;*/
    /*min-width: 270px;*/
    text-align: center;" @click="seccendCopy(props.row.title)">复制</span>
                  </div>

                </el-descriptions-item>


                <el-descriptions-item>
                  <template slot="label">
                    问卷原文
                  </template>
                  <span v-if="props.row.show" style="color: #409EFF;padding-left: 25px;"
                    @click="props.row.show = !props.row.show">点击查看原文</span>
                  <div v-if="!props.row.show" style="display: flex;justify-content: space-around">
                    <div style="width: calc(100% - 140px);">
                      <p>{{props.row.descc}}</p>
                    </div>
                    <span style="display: block;
                      color: rgb(64, 158, 255);
                      height: 100%;
                      width: auto;
                      margin: auto 0;
                      /*float: right;*/
                      /*margin-right: 29px;*/
                      /*min-width: 270px;*/
                      text-align: center;" @click="seccendCopy(props.row.descc)">复制</span>
                  </div>
                  <!--                    <span style="display:block; color: #409EFF; height: 100%;width: 85px;float: right;-->
                  <!--                        margin-right:29px; text-align: right" @click="seccendCopy(props.row.descc)">复制</span>-->
                  <!--                    <span v-if="props.row.show" style="color: #409EFF;" @click="props.row.show = !props.row.show">点击查看原文</span>-->
                  <!--                    <span v-if="!props.row.show">{{ props.row.descc }}</span>-->
                </el-descriptions-item>

                <!--                  <el-descriptions-item>-->
                <!--                    <template slot="label">-->
                <!--                      发布链接-->
                <!--                    </template>-->

                <!--                    <div style="width: 100%">-->
                <!--                      <div style="display:block;height: 100%;width: 85px;float: right;margin-right:29px;text-align: right">-->
                <!--                        <el-button   v-clipboard:copy="props.row.link" v-clipboard:success="fuzhi" type="text">复制</el-button>-->
                <!--                      </div>-->
                <!--                      <div style="display:block;width: calc(100% - 134px); vertical-align: middle; line-height: 100%; float: right">-->
                <!--                        {{ props.row.link }}-->
                <!--                      </div>-->
                <!--                    </div>-->
                <!--                  </el-descriptions-item>-->

                <el-descriptions-item>
                  <template slot="label">
                    发布链接
                  </template>
                  <div style="display: flex;justify-content: space-around">
                    <div style="width: calc(100% - 140px);">
                      <p>{{props.row.link}}</p>
                    </div>
                    <span style="display: block;
                      color: rgb(64, 158, 255);
                      height: 100%;
                      width: auto;
                      margin: auto 0;
                      /*float: right;*/
                      /*margin-right: 29px;*/
                      /*min-width: 270px;*/
                      text-align: center;" @click="seccendCopy(props.row.link)">复制</span>
                  </div>
                  <!--                    <span style="display:block; color: #409EFF; height: 100%;width: 85px;float: right;-->
                  <!--                        margin-right:29px; text-align: right" @click="seccendCopy(props.row.link)">复制</span>-->
                  <!--                    {{ props.row.link }}-->
                </el-descriptions-item>
              </el-descriptions>
            </template>
          </el-table-column>
          <el-table-column label="问卷内容" width="200" header-align="center" :show-overflow-tooltip="true" prop="title">
            <!-- <template slot-scope="scope">
                <div  @click="toogleExpand(scope.row)" style="width: 100%">
                  <span >{{scope.row.title}}</span>
                </div>

              </template> -->
          </el-table-column>
          <el-table-column label="来源" align="center" min-width="60" prop="type">
            <template slot-scope="scope">
              <div @click="toogleExpand(scope.row)" style="width: 100%">
                <span>{{scope.row.type}}</span>
              </div>

            </template>
          </el-table-column>
          <el-table-column label="是否推荐" align="center" prop="isGood">
            <template slot-scope="scope">
              <!--                <span style="margin-left: 10px">-->
              <!--                  <el-tag v-if="scope.row.isGood === 0">普通</el-tag>-->
              <!--                  <el-tag type="danger" v-if="scope.row.isGood === 1">推荐</el-tag>-->
              <!--                </span>-->
              <div @click="toogleExpand(scope.row)" style="width: 100%">
                <span style="margin-left: 10px">
                  <el-tag v-if="scope.row.isGood === 0">普通</el-tag>
                  <el-tag type="danger" v-if="scope.row.isGood === 1">推荐</el-tag>
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="发布时间" align="center" min-width="140" prop="pubdate">
          </el-table-column>
          <el-table-column label="采集时间" align="center" min-width="140" prop="createTime">
          </el-table-column>
          <el-table-column label="操作" align="center" width="120" style="text-align: center">
            <template slot-scope="scope">
              <el-button type="primary" size="small" style="margin-left: 10px" @click="tiaozhuan(scope.row)">查询
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="width: 100%">
          <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="size"
            layout="total, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import mp3 from "../../public/1.mp3"
  export default {
    data () {
      return {
        loading: true,
        audio: null,
        total: 0,
        updateData: {
          type: 'all',
          isGood: '-1',
          keyword: ''
        },
        tixing: false,
        serachData: {
          type: 'all',
          isGood: '-1',
          keyword: ''
        },
        options: [
          { label: '全部', value: 'all' },
          { label: '脸书', value: 'face' },
          { label: '推特', value: 'twit' },
          { label: '红迪', value: 'redd' },
          { label: '领英', value: 'ly' }
        ],
        isGood: [
          { label: '全部', value: '-1' },
          { label: '推荐', value: '1' }
        ],
        tableData: [],
        currentPage: 1,
        size: 10,
        // 定时器
        timer: null,
        pollingST: null,
        tag: true,
        expands: [],//只展开一行放入当前行id
        getRowKeys: (row) => {//获取当前行id

          return row.id   //这里看这一行中需要根据哪个属性值是id
        },
      }
    },
    created () {
      this.getData()
    },
    methods: {
      seccendCopy (str) {
        var that = this
        this.$copyText(str).then(
          function () {
            that.$message({
              message: '复制成功',
              type: 'success'
            });
          },
          function () {

          })
      },
      tiaozhuan (e) {
        window.open(e.link)
        console.log(e)
      },
      exChange (row, rowList) {

        var that = this
        if (rowList.length) { // 只展开一行//说明展开了
          that.expands = []
          if (row) {
            that.expands.push(row.id)// 只展开当前行id
          }
          //  this.tablaData(row.eqId)  这里可以调用接口数据渲染
        } else { // 说明收起了
          that.expands = []
        }
      },
      flush () {
        // 数据刷新事件
        if (this.tixing) {
          this.timer = setInterval(() => {
            if (this.tag) {
              // 向服务器询问是否有新数据？
              this.axios.get(this.baseUrl + 'contentData/havenew?'
                + 'type=' + this.updateData.type
                + '&isGood=' + this.updateData.isGood
                + '&keyword=' + this.updateData.keyword
                + '&total=' + this.total
              )
                .then(res => {
                  if (res.data) {
                    this.getData()
                    this.audio = new Audio();
                    this.audio.src = mp3;
                    this.audio.loop = false
                    this.audio.play();
                  }
                })
            }
          }, 3000)
        } else {
          clearInterval(this.timer);
          this.timer = null;
        }

      },

      // 自定已展开行事件
      toogleExpand (row) {

        let $table = this.$refs.table;
        $table.toggleRowExpansion(row)
      },
      handleCurrentChange (e) {
        this.currentPage = e
        this.getData();
      },
      getData () {
        this.loading = true
        this.tag = false
        // 将数据存到自动刷新参数列表
        this.updateData = this.serachData
        this.axios.get(this.baseUrl + 'contentData/getAll?page=' + this.currentPage
          // this.axios.get(this.baseUrl+'contentData/getAllAdmin?page=' +this.currentPage
          + '&size=' + this.size
          + '&type=' + this.serachData.type
          + '&isGood=' + this.serachData.isGood
          + '&keyword=' + this.serachData.keyword
        )
          .then(res => {
            var data = res.data

            if (data.code === 401) {
              this.$message.error(data.msg);
            }
            else {
              for (var i = 0; i < data.data.records.length; i++) {
                data.data.records[i].pubdate = this.$moment(data.data.records[i].pubdate).format('YYYY-MM-DD HH:mm:ss')
                data.data.records[i].createTime = this.$moment(data.data.records[i].createTime).format('YYYY-MM-DD HH:mm:ss')
                data.data.records[i].show = true

                if (data.data.records[i].type === 'face') {
                  data.data.records[i].type = '脸书'
                }
                else if (data.data.records[i].type === 'twit') {
                  data.data.records[i].type = '推特'
                }
                else if (data.data.records[i].type === 'redd') {
                  data.data.records[i].type = '红迪'
                } else if (data.data.records[i].type === 'ly')
                  data.data.records[i].type = '领英'
              }
              this.tableData = data.data.records
              this.currentPage = data.data.current
              this.total = data.data.total
              this.size = data.data.size
              console.log(res)

              this.tag = true
              this.loading = false
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  }
</script>
<style scoped>
  /* .el-tooltip__popper{
  display: none;
}
.el-table__expand-column{
  visibility:hidden;
} */
</style>